<!--
 * @Author: libing 9852442+liu-sheng-8667@user.noreply.gitee.com
 * @Date: 2024-04-09 20:47:40
 * @LastEditors: xuezhuangzhuang xzz6996@qq.com
 * @LastEditTime: 2025-02-27 21:25:41
 * @FilePath: \crm\pages\customer\customer.vue
 * @Description: 客户公海
-->

<template>
  <view class="customer">
    <view class="header">
      <image :src="$z.imgsrc('list-bg.png')" mode="widthFix" class="bg"></image>
      <view class="bg-bottom"></view>
      <!-- 标题 -->
      <view class="content">
        <view class="customer-title">
          <view class="title-text">客户公海</view>
          <view class="des-text">聚焦客户需求，提升服务水平！</view>
        </view>
        <!--快捷方式  -->
        <view class="shortcut">
          <u-row customStyle="margin-bottom: 10px">
            <u-col span="3" v-for="(item, index) in headerList" :key="index">
              <view class="shortcut-item" @tap="toPage(item.path)">
                <image
                  :src="$z.imgsrc(item.icon)"
                  class="shortcut-icon"
                ></image>
                <view class="shortcut-title">{{ item.title }}</view>
              </view>
            </u-col>
          </u-row>
        </view>
        <div style="display: flex; justify-content: space-between">
          <!-- 请输入搜索内容 -->
          <view class="search">
            <u-search
              placeholder="请输入客户名称"
              v-model="name"
              bgColor="#FFFFFF"
              borderColor="#F8CCCC"
              height="74rpx"
              placeholderColor="#C1C5C9"
              :showAction="false"
              @change="upper"
            />
          </view>
          <view class="search">
            <u-search
              placeholder="请输入手机号"
              v-model="phone"
              bgColor="#FFFFFF"
              borderColor="#F8CCCC"
              height="74rpx"
              placeholderColor="#C1C5C9"
              :showAction="false"
              @change="upper"
            />
          </view>
        </div>
        <u-tabs :list="navList"></u-tabs>
      </view>
    </view>

    <!-- 客户列表 -->
    <view>
      <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
        <view v-for="(item, index) in list" :key="index" class="wrap">
          <CompanyItem
            :item="item"
            isActive
            :customerTypesObj="customerTypesObj"
            @jump="toCustomerInfoPage(item)"
          />
        </view>
        <u-loadmore iconType="circle" :status="status" />
      </scroll-view>
    </view>
    <tabbar></tabbar>
  </view>
</template>

<script>
import CustomerItem from "./conponents/customer-item.vue";
import listPageMixins from "./mixins/scroll-list";
import { getCompanyListPage } from "@/apis/customer/index";
import CompanyItem from "./conponents/company-item.vue";
import asyncSelect from "./mixins/async-select";
export default {
  name: "customer",
  components: {
    CustomerItem,
    CompanyItem,
  },
  mixins: [listPageMixins, asyncSelect],
  data() {
    return {
      phone: "",
      name: "",
      headerList: [
        // {
        //   icon: "list1.png",
        //   title: "找企业",
        // },
        // {
        //   icon: "list2.png",
        //   title: "区域搜索",
        // },
        // {
        //   icon: "list3.png",
        //   title: "人群池",
        // },
        {
          path: "/pagescustomer/customer/customer-pool-list",
          icon: "list4.png",
          title: "客户公海",
        },
      ],
      navList: [
        {
          name: "我的客户",
        },
      ],
      current: 0,
      customerList: [],
      inputStyle: {
        border: `1rpx solid #F8CCCC`,
      },
      queryAPI: getCompanyListPage,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 跳转二级页面
    toPage(path) {
      if (path) {
        uni.navigateTo({
          url: path,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.customer {
  background: #f2f4f5;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .header {
    height: 665rpx;
    background: #ffffff;
  }
  .bg {
    width: 100%;
    height: 156rpx;

    &-bottom {
      height: 120rpx;
    }
  }

  .content {
    width: 100%;
    position: absolute;
    top: 140rpx;
    padding: 0 18rpx;
    box-sizing: border-box;
  }

  &-title {
    padding: 0 24rpx;

    .title-text {
      font-size: 46rpx;
      color: #ffffff;
      line-height: 63rpx;
    }

    .des-text {
      padding-top: 6rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 40rpx;
    }
  }

  .shortcut {
    margin-top: 74rpx;
    margin-bottom: 40rpx;

    &-item {
      text-align: center;
    }

    &-icon {
      width: 96rpx;
      height: 96rpx;
    }

    &-title {
      font-weight: 400;
      font-size: 24rpx;
      color: #171a1d;
      line-height: 33rpx;
    }
  }

  .scroll-Y {
    // flex:1;
    height: calc(100vh - 765rpx - env(safe-area-inset-bottom));
    padding: 0 18rpx;
    box-sizing: border-box;
    overflow: hidden;
  }
}

.wrap {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx 0;
  margin-top: 20rpx;
}
</style>
